<template>
  <div v-if="item.status == -2" class="mw-column-center-style" :style="{height:windowHeight+'px'}"
       style="width:3.75rem;justify-content: center;background-color: #F5F5F5">
    <img src="/static/has_deleted.png" style="width: 0.44rem;height:0.54rem;object-fit: cover"/>
    <div class="mw-third-text-color" style="font-size: 0.13rem;margin:0.15rem 0;">作者已删除</div>
    <img @click="cancelDeleteCollect" style="width:0.48rem;height:0.48rem;object-fit: fill"
         :src="item.collected == 1 ? '/static/collected.png':'/static/uncollected.png'"></img>
  </div>
  <div v-else class="mw-row-style" :style="{height:windowHeight+'px'}"
       style="justify-content: center;align-items: center">
    <!--<img :class="{ contentMaoboli: arrayindex == currentindex || arrayindex -1 == currentindex || arrayindex +1 == currentindex }" :style="{height:windowHeight+'px'}" style="width:3.75rem;position:absolute;object-fit: cover;" :src="item.image"></img>-->
    <img class="contentMaoboli" :style="{height:windowHeight+'px'}"
         style="z-index:1;width:3.75rem;position:absolute;object-fit: cover;" :src="item.image"></img>
    <!--<img  :style="{height:windowHeight+'px'}" style="width:3.75rem;position:absolute;object-fit: fill;background-color:rgba(0,0,0,0.5)" ></img>-->
    <div :style="{height:windowHeight+'px'}"
         style="z-index:1;width:3.75rem;position:absolute;background-color:rgba(0,0,0,0.5)"></div>
    <!--</div>-->
    <div class="mw-column-center-style" style="position: relative;">
      <div
        style="position:absolute;top:0.8rem;z-index:2;border-radius:0.04rem;width:3.35rem;height:3.94rem;background-color: #ffffff">

      </div>
      <div class="mw-column-center-style" style="width:3.05rem;z-index:3;">
        <div @click="clickShowPictures" style="width:2.65rem;height:2.65rem;position:relative;border-radius:0.04rem;">
          <img
            style="position:absolute;left:0;top:0;width:2.65rem;height:2.65rem;object-fit:cover;border-radius:0.04rem;"
            :src="item.image"></img>
          <div v-if="cdtime!= 0 && formatTime !=''" class="mw-main-red"
               style="position:absolute;left:0.08rem;bottom:0.08rem;background-color: #ffffff;border-radius: 0.04rem;font-size:0.11rem;padding:0.04rem 0.08rem;">
            限时：{{formatTime}}
          </div>
          <div v-if="item.pictures_total!= 0" class="mw-main-white"
               style="position:absolute;left:0.08rem;line-height:0.18rem;top:0.08rem;background-color: rgba(0,0,0,0.5);border-radius: 0.04rem;font-size:0.11rem;padding:0 0.06rem;">
            {{item.pictures_total}}图
          </div>
        </div>

        <div class="mw-row-spacebetween-style"
             style="margin-top:0.04rem;margin-bottom:0.04rem;width:100%;align-items: center;height:0.45rem;font-size: 0.30rem;">
          <div class="mw-column-style" style="height:100%;justify-content: space-around">
            <div class="mw-row-style" style="align-items: center">
              <div class="mw-row-style mw-main-red" style="font-weight: bold;align-items: baseline">
                <div v-if="item.coupon_amount != 0" style="font-size: 0.12rem">券后</div>
                <div style="font-size: 0.12rem">￥</div>
                <div style="font-size: 0.22rem">{{item.price}}</div>
              </div>
              <div v-if="item.coupon_amount != 0" class="mw-column-center-style" style="margin-left:0.04rem;justify-content:center;font-size:0.1rem;color:#ffffff;padding:0 0.1rem;height:0.16rem;background-image: url(/static/coupon_icon.png);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}
">{{item.coupon_amount}}元券
              </div>
            </div>

            <div class="mw-row-style mw-third-text-color" style="font-size: 0.11rem">
              <div style="margin-right:0.04rem">{{item.platform}}</div>
              <div style="text-decoration:line-through">￥{{item.original_price}}</div>
            </div>
          </div>
          <div class="mw-row-style">
            <div style="position:relative">
              <img @click="sendClickCollect(item)" style="width:0.24rem;height:0.24rem;object-fit: fill"
                   :src="item.collected == 1 ? '/static/collected.png':'/static/uncollected.png'"></img>
              <img @click="skipToProfile()" v-if="showCollectTips"
                   style="left:-1.34rem;top:-0.52rem;position:absolute;width:1.69rem;height:0.65rem;object-fit: fill"
                   src="/static/collect_success_tips.png"></img>
            </div>
            <img hidden style="margin-left:0.2rem;width:0.24rem;height:0.24rem;object-fit: fill"
                 src="/static/share.png"></img>
          </div>
        </div>
        <div class="mw-first-text-color mw-n-line"
             style="width:100%;height:0.4rem;line-height:0.2rem;font-size:0.16rem;font-weight: bold">{{item.title}}
        </div>
        <div class="mw-second-text-color mw-n-line" style="width:100%;height:0.64rem;line-height:0.16rem;margin-top:0.04rem;font-size:0.13rem;  -webkit-line-clamp: 6;
">{{item.description}}
        </div>
      </div>
      <div class="mw-row-spacebetween-style" style="width:3.05rem;align-items: center;z-index:3;">
        <div @click.stop="sendUserPage(item.user.id)" class="mw-row-style"
             style="align-items: center;width: 1.15rem;margin-bottom:0.2rem;">
          <img class="mw-avatar-style"
               :src="item.user.avatar == ''? '/static/defalut_avatar.png':item.user.avatar"></img>
          <div class="mw-single-line mw-third-text-color" style="margin-left:0.04rem;font-size: 0.11rem;width:0.77rem;">
            {{item.user.name}}
          </div>
        </div>
        <div @click.stop="sendClickBuy(item)" class="mw-column-center-style mw-main-background-red"
             style="border:0.08rem solid #ffffff;height:0.6rem;width:0.6rem;border-radius:0.38rem;justify-content: center;">
          <div class="mw-main-white" style="font-size: 0.28rem">抢</div>
          <div class="mw-horizon-divider mw-main-background-white"
               style="width:0.28rem;margin-top:0.02rem;margin-bottom:0.04rem;"></div>
          <div class="mw-main-white" style="font-size: 0.09rem;">
            {{item.click_total < 10000 ? item.click_total : (Math.floor(item.click_total / 10000 * 10) / 10 + 'w')}}次
          </div>
        </div>
        <div class="mw-row-style"
             style="align-items: center;width: 1.15rem;margin-bottom:0.2rem;justify-content:flex-end;">
          <div class="mw-row-style"
               style="padding-left:0.03rem;padding-right:0.07rem;align-items: center;height:0.2rem;border-radius:0.1rem;display: flex;background-color:rgba(237,61,93,0.05)">
            <img style="height:0.14rem;width:0.14rem;" src="/static/topic_icon.png"></img>
            <div class="mw-single-line" style="margin-left:0.03rem;font-size: 0.11rem;color: #ed3d5d;max-width:0.8rem;">
              618
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>

</template>
<script>
  import utils from '../utils'
  import httputil from '../httputil'

  export default {
    props: ['item', 'windowHeight', 'arrayindex', 'currentindex'],
    data() {
      return {
        showCollectTips: false,
        formatTime: "",
        cdtime: 0,
      }
    },

    computed: {},
    created() {
    },
    watch: {},
    mounted() {
      var that = this
      if (this.item.end_time == 0) {
        this.cdtime = 0
      } else {
        this.cdtime = this.item.end_time - Date.parse(new Date()) / 1000
        var day = parseInt(that.cdtime / 3600 / 24);
        //获取还剩多少小时
        var hour = parseInt(that.cdtime / 3600 % 24);
        //获取还剩多少分钟
        var minute = parseInt(that.cdtime / 60 % 60);
        //获取还剩多少秒
        var second = that.cdtime % 60;
        if (day != 0) {
          that.formatTime = day + "天"
        }
        that.formatTime = that.formatTime + hour + ":" + minute + ":" + second
        this.countdowntime()
      }

    },
    methods: {
      clickShowPictures() {
        window.location.href = window.location.href + "#viewpictures";
      },
      countdowntime() {
        var that = this;
        var timer = setInterval(function () {
          //获取还剩多少天
          var day = parseInt(that.cdtime / 3600 / 24);
          //获取还剩多少小时
          var hour = parseInt(that.cdtime / 3600 % 24);
          //获取还剩多少分钟
          var minute = parseInt(that.cdtime / 60 % 60);
          //获取还剩多少秒
          var second = that.cdtime % 60;
          if (day != 0) {
            that.formatTime = day + "天"
          }
          that.formatTime = that.formatTime + hour + ":" + minute + ":" + second
          that.cdtime = that.cdtime - 1;
          if (that.cdtime == 0) {
            clearInterval(timer);
          }
        }, 1000);
      },
      skipToProfile() {
        this.$replaceRouteByPath("/profile")
      },
      cancelDeleteCollect() {
        var that = this
        if (that.item.collected == 1) {
          var params = {discount_id: that.item.id}
          httputil.request("collect/discount", params, function (successresult) {
            that.item.collected = successresult.collected
          }, function (errorresult) {

          }, "POST", true, "saledetail")
        }

      },
      sendClickCollect(item) {
        if (this.$getLoginStatus() && localStorage.getItem("showCollectTips") == null) {
          this.showCollectTips = true
          localStorage.setItem("showCollectTips", this.showCollectTips)
          setTimeout(() => {
            this.showCollectTips = false
          }, 5000)
        }
        this.$emit('receiveClickCollect', item)
      },
      sendUserPage(id) {
        this.$router.push({name: 'userpage', query: {id: id}})
        this.$emit('receiveUserPage', id)
      },
      sendClickBuy(item) {
        var that = this
        item.click_total = item.click_total + 1
        httputil.request("discount/click", {discount_id: item.id}, function (successresult) {
          that.$emit('receiveClickBuy', item)
        }, function (errorresult) {
          that.$emit('receiveClickBuy', item)
        }, "POST", true, "")
      },
      getCount(count) {
        return utils.calculateCount(count)
      }
    }
  }

</script>
<style scoped>

</style>
